<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/themes/icon.css">
    <script type="text/javascript" src="../jquery-easyui-1.6.6/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>

    <title>管理员登陆</title>
    <style>
        body {
            height: 700px;
            background: url(../js/1.jpg) no-repeat;
            background-size: cover;
        }
        
        .box {
            box-sizing: border-box;
            width: 300px;
            height: 400px;
            padding: 40px 20px;
            margin: 40px auto;
            background-color: #fff;
        }
        
        #forget {
            padding: 10px 0;
            color: #aaa;
            font-size: 14px;
            text-decoration: none;
            margin-left: 10px;
        }
        
        #forget:hover {
            color: red
        }
        
        .toptip {
            text-align: center;
            font-size: 24px;
            color: black;
            line-height: 60px;
            margin-bottom: 30px;
        }
        
        .yanm {
            display: inline-block
        }
        
        .yanm i {
            color: #666;
            font-size: 16px;
            font-style: normal
        }
        
        .yanm span {
            padding: 5px 10px;
            margin: 0 5px;
            border: 1px solid #aaa;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="toptip ">
            请您登陆
        </div>
        <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
            <div style="margin-bottom:30px">
                <input class="easyui-textbox" id="name" prompt="Username" data-options="iconCls:'icon-user'" style="width:100% ;height: 30px;">
            </div>
            <div style="margin-bottom:5px;">
                <input class="easyui-passwordbox" id="pwd" prompt="Password" style="width:100%;height:34px;padding:10px">
                <a id="forget" href="javascipt:;">忘记密码</a>
            </div>
            <div style="margin-bottom:5px;">
                <input class="easyui-textbox" id="yan" style="width:50%;height:34px;padding:10px">
                <div class="yanm">
                    <span id="random"></span>
                    <i>验证码</i>
                </div>

            </div>
        </form>
        <div class="tip" style="text-align:left;height: 30px;color: #666;font-size: 14px"></div>
        <div style="text-align:center;margin-top: 30px">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="loginForm() " style="width:80px">登陆</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="Ctrl.clearForm()" style="width:80px">清空</a>
        </div>
    </div>
</body>
<script src="../js/controller.js"></script>
<script>
    var Ctrl = new Controller();
    Ctrl.module = 'users';


    //随机生成验证码
    var Rarr = [];

    function random() {
        Rarr = [];
        for (let i = 0; i < 4; i++) {
            var r = Math.floor(Math.random() * 5);
            Rarr.push(r);
        }
        $('#random').html(Rarr);
        console.log(+Rarr.join(''))
    }
    random();
    $('#random').click(random) //点击再次生成新的验证码

    function loginForm() {
        var name = $('#name').val();
        var Password = $('#pwd').val()
        var yan = $('#yan').val();
        data = {
            name: name,
            password: Password
        };
        if (+yan === +Rarr.join('')) {
            $.ajax({
                url: 'http://localhost:3000/admin',
                data: data,
                type: 'post'
            }).then(data => {
                // console.log(data)
                if (data.length > 0) {
                    sessionStorage.setItem('name', data[0].name);
                    location.href = 'home.html';
                } else {
                    $('.tip').html(data + '请核对用户名或密码')
                }
            })
        } else {
            $('.tip').html('验证码错误');
            random();
        }
        return false;
    }
</script>

</html>